<template>
  <el-form :model="form" :inline="true" ref="addEditForm" :modal-append-to-body="false">
    <el-dialog
      :title="`${dialogText + title}`"
      :before-close="dialogClose"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="closeOnClickModal"
      :width="dialogWidth">
      <!-- 表单主体 -->
      <slot></slot>
      <fml-input
        :FormConfig="formConfig"
        :showMore="true"
        ref="fmlInput"
        @getValidate="validateResult"
      ></fml-input>
      <slot name="other"></slot>
      <!-- 底部按钮区 -->
      <!-- dialogType 新增add 审核audit 查看look -->
      <!-- footer 可为查看--只有取消按钮，审核--取消，通过，不通过按钮，新增修改--保存，取消按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose" size="small" class=" cancel ">取 消</el-button>
         <el-button
          type="primary"
          @click="submitForm(11)"
          size="small"
          class="margin-l30"
          :loading="loading"
          v-if="otherBtn"
        >{{otherBtn}}</el-button>
        <el-button
          type="primary"
          @click="submitForm()"
          size="small"
          class="margin-l30"
          :loading="loading"
          v-if="dialogType=='add'"
        >{{saveBtn}}</el-button>
        <el-button
          type="primary"
          @click="submitForm(1)"
          data-audit="1"
          size="small"
          :loading="yesloading"
          v-if="dialogType=='audit'"
        >通 过</el-button>
        <el-button
          type="primary"
          @click="submitForm(2)"
          data-audit="2"
          size="small"
          :loading="noloading"
          v-if="dialogType=='audit'"
        >不通过</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>
<script lang="ts">
import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
import { State } from "vuex-class"
@Component({
  components:{}
})

export default class fmlDialog extends Vue{
  loading:boolean=false;
  yesloading:boolean= false;
  dialogText:string='';
  noloading:boolean =false;
  audit:number= 0; //如果是审核的话，通过此参数1 通过 2不通过
  $refs:{
    fmlInput:HTMLDivElement
  }
  @Prop({default:false})
  otherBtn:string;//除保存，取消，审核按钮之外的按钮
  @Prop({default:'保存'})
  saveBtn:string;//按钮名称
  @Prop()
  formConfig: any; //表单配置
  @Prop()
  title: string; //弹窗标题
  @Prop()
  form: any;//弹窗表单数据
  @Prop()
  addParam: any; //新增参数
  @Prop()
  auditParam:any;
  @Prop()
  addApi: string; //新增接口
  @Prop()
  otherParam:object;//其他接口参数
  @Prop()
  editParam: any; //编辑参数
  @Prop()
  editApi: string; //编辑接口
  @Prop()
  auditApi: string; //审核接口
  @Prop()
  sendparam:string; //审核回传的key
  @Prop()
  dialogWidth:string;
  @Prop()
  closeOnClickModal:boolean;//单击其他地方
  // @Prop()
  // dialogText:string

  @State dialogVisible:boolean;
  @State editData:any;
  @State dialogType:string;

  @Watch('dialogVisible')
  onDialogVisible(){
    this.dialogText=this.dialogType=='audit'?'审核':(this.dialogType=='look'&&!this.otherBtn?'查看':this.dialogType=='add'&& !this.otherBtn?'新增':this.dialogType=='edit'&&!this.otherBtn?'修改':this.otherBtn)
    if(this.dialogVisible&&(this.dialogType=='audit'||this.dialogType=='look')){
      this.formConfig.defaultConfig.tr.map(item=>{
        item.td.map(item1=>{
          if(item1.notDisabled)return
          item1.disabled=true
        })
      })
    }
  }
  // 关闭弹窗
  dialogClose() {
    this.formConfig.defaultConfig.tr.map(item=>{
      item.td.map(item1=>{
        if(item1.notDisabled)return
        item1.disabled=false
      })
    })
    this.$refs.fmlInput.clearValidate(); //每次关闭弹窗清空校验
    this.$store.commit("setDialogVisible", false);
  }
  // 新增修改
  async submitForm(audit) {
    this.audit = audit || "";
    this.$refs.fmlInput.callMethod();
  }
  // 新添加解决校验不同步问题
  async validateResult(result) {
    await this.addOrEditApi(result);
  }
  // 接口公用
  async commonFun(){
    let auditParam = this.auditParam;
    if (this.dialogType== 'audit') {
      if (!this.sendparam)return this.$message({message:"审核的key不存在",type:'error',showClose:true});
      auditParam[this.sendparam] = this.audit;
    }

    const Api =this.dialogType == "audit"? this.auditApi:(this.dialogType=='edit'?this.editApi:this.addApi); //接口
    let Param = this.dialogType=='audit'?auditParam :(this.dialogType=='edit'? this.editParam : this.addParam); //新增还是修改的还是审核参数
    if (this.audit == 1) {
      this.yesloading = true;
    } else if (this.audit == 2) {
      this.noloading = true;
    }
    if(this.audit==11){
      Param={...{id:Param['id']},...this.otherParam}
    }
    this.loading = true;
    var err,res;
    if(this.dialogType=='add'){
      [err,res]= await this.$fetchService.fetchPost(Param,Api,false);
    }else{
      [err,res] = await this.$fetchService.fetchPut(Param,Api,this.dialogType!='del'?false:true);
    }
    if (err) {
      this.loading = false;
      this.yesloading = false;
      this.noloading = false;
      return this.$message({message:err.message || `${this.dialogText}失败`,type:'error',showClose:true});
    }
    this.$message({message:`${this.dialogText||this.otherBtn}成功`,type:'success',showClose:true});
    this.dialogClose();
    this.loading = false;
    this.yesloading = false;
    this.noloading = false;
    this.$store.commit("setUpdateTable");
  }
  async addOrEditApi(result) {
    if (!result) return;
    this.commonFun()
  }
}
</script>
